<template>
	<gui-page :fullPage="true" :isLoading="false" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns">
			<!-- 分类导航 -->
			<view class="headerTap gui-border-box" id="myheader">
				<view class="detail-box flex-dc cfff" style="justify-content: space-between;">
					<view class="flex-dc-jc flex1 info">
						<text style="opacity: .9;">可提现佣金</text>
						<text class="f48 bold">￥{{$u.priceFixed(vuex_userInfo.balance)}}</text>
					</view>
					<view class="bo flex-ac">累计提现收益：￥{{$u.priceFixed(vuex_userInfo.totalBalance)}}</view>
				</view>
			</view>
			<view style="padding: 10rpx 21rpx;">
				<view class="withdraw bgfff">
					<text class="bold f28">提现金额</text>
					<view class="input flex-ac-jb">
						<input type="number" v-model="money" class="flex1"/>
						<text class="primary-color" @tap="changeMoneyAll">全部提现</text>
					</view>
					<view class="saveBtn" @tap="handleWithdraw">确认提现</view>
					<view class="tip f18 c666">提示：提现将在1个工作日提现到绑定手机号的微信账户中</view>
				</view>
			</view>
			<!-- 居中弹出 -->
			<gui-popup ref="guipopup" width="480rpx">
				<view class="gui-relative gui-box-shadow bgfff popup radius15 f26">
					<view class="close-btn gui-icons bold flex-ac-je c999" @tap="handleClose()">&#xe610;</view>
					<view class="popup-con flex-dc-ac">
						<text class="bold title f28">温馨提示</text>
						<image class="popup-img" src="../../static/index/vipTip.png" mode="widthFix" style="height: auto;">
						</image>
						<text>您已成功发起提现</text>
						<text class="primary-color f30">￥{{$u.priceFixed(tiMoney)}}</text>
						<view class="saveBtn" @tap="goBack">查看明细</view>
					</view>
			
				</view>
			</gui-popup>
			
		</view>
	</gui-page>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isUserFrom:true,
				money:'',
				tiMoney:''
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad: function(options) {
			this.isUserFrom = options.isUserFrom?true:false
			
		},
		methods: {
			changeMoneyAll(){
				if(!this.vuex_userInfo.balance) return;
				this.money = this.vuex_userInfo.balance
			},
			handleOpen: function() {
				this.$refs.guipopup.open();
			},
			handleClose: function() {
				this.$refs.guipopup.close();
			},
			handleWithdraw(){
				if(!this.money) return this.$u.msg('请输入提现金额！')
				if(!this.vuex_userInfo.balance) return this.$u.msg('余额不足！');
				this.tiMoney = this.money
				this.$http.post('/api/withdrawal/apply',{
					money:this.money
				}).then(res => {
					let result = res.data
					console.log('提现',result)
					this.handleOpen()
					uni.$emit('isWithdraw',true)
					this.money = ''
					this.getUser()
				})
			},
			getUser() {
				this.$http.post('/api/oauth/info').then(res => {
					let result = res.data
					console.log('用户信息', result)
					this.$u.vuex('vuex_userInfo', result);
				})
			},
			goBack(){
				if(!this.isUserFrom){
					this.$u.back()
				}else{
					this.$u.to('/pages/user/commissionDetail?index=1','redirectTo')
				}
			}
			
		}
	}
</script>
<style lang="less">
	.headerTap {
		.detail-box {
			position: relative;
			background: url(../../static/user/commission-bg.png) no-repeat;
			background-size: 100% 100%;
			height: 230rpx;
			margin: 20rpx 21rpx 0 21rpx;

			.info {
				padding-left: 47rpx;
			}

			.bo {
				height: 80rpx;
				padding-left: 47rpx;
			}

			
		}
	}

	.withdraw{
		border-radius: 10rpx;
		padding: 30rpx 47rpx;
		margin-top: 10rpx;
		.input{
			height: 80rpx;
			border-radius: 6rpx;
			border: 1rpx solid #CCCCCC;
			padding: 0 24rpx;
			margin-top: 30rpx;
			.primary-color{
				margin-left: 20rpx;
				position: relative;
				top: -4rpx;
			}
		}
		.saveBtn{
			margin-top: 60rpx;
			height: 70rpx;
			font-size: 24rpx;
		}
		.tip{
			margin-top: 17rpx;
		}
	}
	.popup {
		position: relative;
		padding: 52rpx 80rpx 45rpx 80rpx;
	
		.close-btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 100rpx;
			height: 60rpx;
			padding-right: 20rpx;
		}
	
		.popup-con {
			.title {}
	
			.popup-img {
				width: 215rpx;
				margin: 20rpx 0 30rpx 0;
			}
	
			.saveBtn {
				width: 269rpx;
				height: 64rpx;
				font-size: 24rpx;
				margin-top: 36rpx;
			}
		}
	}
</style>